<template>
    <div class="concept">
      <search-title></search-title>
        <loading v-if="loadingShow" loadingStyle="height: 700px"></loading>
        <section class="wrap modeInfoBox" v-else>
            <div class="modeCrumbs">
                <router-link :to="{path:'/concept',query:{type:4,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}" tag="span"  v-text="this.typeMsg[infoMsg.type]" :key="infoMsg.type">
                </router-link>
                <i></i>
                <router-link :to="{path:'/concept',query:{type:4,catid1:infoMsg.cat_id1.id,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}" tag="span" v-if="infoMsg.cat_id1.catname" v-text="infoMsg.cat_id1.catname" :key="infoMsg.cat_id1.id"></router-link>
                <i v-if="infoMsg.cat_id1.catname"></i>
                <router-link :to="{path:'/concept',query:{type:4,catid1:infoMsg.cat_id1.id,catid2:infoMsg.cat_id2.id,style:0,id:0,keys:0,sort:0,vip:0,page:0}}" tag="span" v-if="infoMsg.cat_id2" v-text="infoMsg.cat_id2.catname" :key="infoMsg.cat_id2.id"></router-link>
                <i v-if="infoMsg.cat_id2"></i>
                <span v-text="infoMsg.title"></span>
            </div>
            <div class="clearfix">

                <div class="modeInfoLeft">
                  <!-- <div class="vipFree" v-show="infoMsg.is_vip"></div> -->
                    <!-- <swiper :options="swiperOption" ref="mySwiper" class="modeBanner swiper-no-swiping">
                        <swiper-slide v-for="(item,index) in infoMsg.images" :key="index" class="uploadImgBox">
                          <img :ref="item" @load="getWh(item)" :src="$store.state.AuthUser.smallImgAfter+item" alt=""></swiper-slide>
                        
                    </swiper>
                    <span class="btnLeft swiper-button-prev"></span>
                    <span class="btnRight swiper-button-next"></span> -->
                    <ul class="modeBanner swiper-no-swiping" id="modeInfoConcept">
                      <li v-for="(item,index) in infoMsg.images" :key="index" class="uploadImgBox">
                          <img :ref="item" @load="getWh(item)" style="opacity:0" :src="$store.state.AuthUser.smallImgAfter+item" :alt="infoMsg.title">
                      </li>
                    </ul>
                    <div class="swiper-pagination modeIcon"></div>
                    <!-- <div class="modeIcon clearfix">
                        <img v-for="(item,index) in infoMsg.images" :src="$store.state.AuthUser.imgAfter+'/small/'+item"  alt="" :key="index">
                     </div> -->
                </div>
                
                <div class="modeInfoRight">
                    <div class="modeMsg">
                      <div class="modeUserTitle">
                            <p>
                              <span class="newUserName">{{infoMsg.userinfo.name}}</span>
                             <router-link :to="{path:'/author',query:{id:infoMsg.userinfo.user_id}}">
                                  <span class="newUserHome">进入主页</span>
                              </router-link>
                            </p>
                            <p>
                             <img :src="infoMsg.userinfo.avatar" alt=""> 
                            </p>
                        </div>
                        
                        
                        <div class="modeUserInfo">
                            <h4 :title="infoMsg.title">{{cutString(infoMsg.title,60)}}</h4>
                            <span class="infoItemId">ID:&nbsp;<span>{{infoMsg.id}}</span></span> 
                            <div style="padding-right:20px" class="minIconBox">
                                <span><i class="browseIcon"></i>
                                        {{infoMsg.viewnum}}
                                    </span> 
                                <span><i class="downloadNum"></i>
                                        {{infoMsg.downnum}}
                                </span> 
                                <span><i class="collNum"></i>
                                   {{infoMsg.collecnum}} 
                                </span>
                            </div>
                            <div>
                                <img v-if="infoMsg.is_vip" src="./img/infoVip.png" alt="" style="margin-right:6px;">
                                <img v-if="infoMsg.update" src="./img/infoUpdata.png" alt="">
                            </div>
                            
                        </div>
                        <!-- <p class="modeUserTitle">
                            <router-link :to="{name:'author',params:{id:infoMsg.userinfo.user_id}}">
                                <img :src="infoMsg.userinfo.avatar" alt="">
                                <span>{{infoMsg.userinfo.name}}</span>
                            </router-link>
                        </p> -->
                        <div class="modeInfoList">
                             <p>
                                 <span class=""><i class="uploadIcon"></i>{{infoMsg.created_at}}</span>
                            </p>
                            <p>
                                 <span> <i class="ramSizeIcon"></i> {{infoMsg.filesize}}</span>
                            </p>
                            <!-- <p>
                                 <span> <i class="uploadIcon"></i>{{infoMsg.created_at}}</span>
                            </p> -->
                            
                        </div>
                        <div class="rightBtn clearfix">
                           <button class="keepBtn" @click.prevent.stop="collection({e:$event,id:infoMsg.id,type:infoMsg.type})">
                              <!-- <i class="collBotton activeCollBotton"></i>收藏 -->
                               <i class="collBotton" :class="{'activeCollBotton':isInArray(infoMsg.id)}"></i>
                            {{isInArray(infoMsg.id)?"已收藏":"收藏"}}
                          </button>
                          <button class="transaction" @click="confirmDownload(infoMsg.id,infoMsg.title,infoMsg.coins)">
                              <i class="downloadIcon"></i>{{infoMsg.coins}} 交易币
                          </button>
                      </div>
                    </div>
                    
                </div>
            </div>
            <!-- <div class="clearfix explainBox">
            </div> -->
            <rim :remInfo="rimMsg" toUrl="/modeInfo" :type="modeType"></rim>
        </section>
    </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import searchTitle from '../searchTitle/searchTitle'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading'
import rim from './rim'

import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "modeInfoSu",
  data() {
    return {
      loadingShow:true,
      typeMsg:["","3D模型","SU模型","施工图","概念方案","预算方案","材质贴图","高清案例"],
      msg: "我是模型详情",
      modeType:"4",
       rightTop:{
        right:0,
        top:0
      },//右边栏距离顶部和右边的距离
      rimMsg:null,//相关推荐数据
      maskShow : false,
      keyWordsMsg : '软装方案_概念方案_设计方案汇报_软装PPT',//关键词
      titleMsg : '_集设网',//描述
      descriptionMsg : "集设网-概念方案下载，优质的室内设计素材下载网站",
      swiperOption: {
        prevButton: ".swiper-button-prev", //上一张
        nextButton: ".swiper-button-next", //下一张
        pagination: '.swiper-pagination',//点击页码切换
        paginationClickable :true,//点击页码切换
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      domains: [
        {
          value: ""
        }
      ],
      diyStyle:{//弹窗的位置
          top: "100px",
          left: "600px"
      },
      infoMsg : {//详情信息
                "id": "",
                "type": "",
                "user_id": "",
                "title": "Curt Kessler PhD",
                "file": "/model/1.rar",
                "coins": "",
                "filesize": "209M",
                "images": [
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690"
                ],
                "appversion": "",
                "renderertype": "",
                "cat_id1": "",
                "cat_id2": "",
                "style": "",
                "is_light": "无",
                "status": "",
                "viewnum": "",
                "collecnum": "",
                "downnum": "",
                "created_at": {
                    "date": "",
                    "timezone_type": "",
                    "timezone": ""
                }
        },
    };
  },
  methods: {
      confirmDownload(id,name,money) {
        if(this.$store.state.AuthUser.userInfo){
            this.$Modal.confirm({
                title: '提示',
                content: '<p>确认下载?</p>',
                loading: false,
                draggable : true,
                scrollable:true,
                onOk: () => {
                    this.actionDownload(id,name,money)
                }
            });
        }else{
            this.loginShow();
        }
            
            
        },
    getWh(ele){
      if(this.$refs[ele][0].clientWidth<this.$refs[ele][0].clientHeight){
        this.$refs[ele][0].setAttribute("class","modeBannerH");
        this.$refs[ele][0].style.opacity = 1;
      }else{
        this.$refs[ele][0].setAttribute("class","modeBannerW");
        this.$refs[ele][0].style.opacity = 1;
      };
      var galley = document.getElementById("modeInfoConcept");
        var viewer = new Viewer(galley, { // 相关配置项,详情参考官网
            navbar: false,
            loop:false
        });
    },
    ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName","collection"]
        ),
        cutString(str, len) {
        //length属性读出来的汉字长度为1
        if(str.length*2 <= len) {
            return str;
        }
        var strlen = 0;
        var s = "";
        for(var i = 0;i < str.length; i++) {
            s = s + str.charAt(i);
            if (str.charCodeAt(i) > 128) {
                strlen = strlen + 2;
                if(strlen >= len){
                    return s.substring(0,s.length-1) + "...";
                }
            } else {
                strlen = strlen + 1;
                if(strlen >= len){
                    return s.substring(0,s.length-2) + "...";
                }
            }
        }
        return s;
    },
    errorWarning(msg,n) {
      var This = this;
      this.$message({
            message: msg,
            type: 'error',
            customClass : 'downLoadError',
            duration : 2000,
            showClose : true,
            onClose:function () {
                if(n){
                    let routeData = This.$router.resolve({ path: '/recharge'});
                    window.open(routeData.href, '_blank');
                }
            }
        });
    }, 
    actionDownload(id,name,money){//点击下载
        axios({
            method: 'get',
            url: '/downdata/'+id,
            // responseType: 'blob'
        }).then(response => {
            // return;
            if(response.data.status=="1"){
                // window.open(this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); 
                window.location.href = this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey;
            }else if(response.data.status=="0"){
                this.errorWarning('交易币不足，请充值后再进行下载...',true);
                
            }
          
          }).catch((error) => {
              this.errorWarning("下载失败",false);
          })
    },
     download (data,name) {//下载要执行的函数
            if (!data) {
                return
            }
            let url = window.URL.createObjectURL(data);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', name+'.rar');
            document.body.appendChild(link);
            link.click();
        },
    getContent(value, content) {
      $("#province option").each(function(i, e) {
        if ($(e).val() == value) {
          number = i;
        }
      });
    },
    //遮罩的显示与隐藏
    mask(){
        this.maskShow = true;
    },
    maskHide () {
        this.maskShow = false;
    },
    diyMaskPosition(){
        this.diyStyle.left = (document.body.offsetWidth - 547)/2 +"px";
        this.diyStyle.top = (document.documentElement.clientHeight - 629)/2 +"px";
    },
    isInArray(value){
           var arr = null;
           if(!this.user.userInfo){
               return
           }else{
               if(this.modeType!="7"){
                arr = this.user.userInfo.data.datacollects;
                }else{
                    arr = this.user.userInfo.data.articlecollects;
                }
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
           }
           
        },
        positionWheel(){
            if($(window).scrollTop()>71&&$(".modeBanner").outerHeight()-$(window).scrollTop()+71>$(".modeMsg").outerHeight()){
              $(".modeMsg").css({
                "position":'fixed',
                "top":'71px',
                "right":this.rightTop.right-1
              })
            }else{
              $(".modeMsg").css({
                "position":'relative',
                "top":"0",
                "right":"0"
              })
            }
        }
  },
  mounted(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    this.diyMaskPosition();
     window.addEventListener('scroll', this.positionWheel)
    /* window.onresize = ()=>{
        this.diyMaskPosition();
    } */
  },
  components:{
    searchTitle,
    loading,
    rim
  },
  created(){

        axios.get('/info/'+this.$route.query.modeId+"/getInfo").then(response => {
            this.infoMsg = response.data.data;
            this.loadingShow = false;
            this.keyWordsMsg = this.infoMsg.cat_id1.catname+'软装方案_'+this.infoMsg.cat_id1.catname+'概念方案_'+this.infoMsg.cat_id1.catname+'设计方案汇报_'+this.infoMsg.cat_id1.catname+'软装PPT';//关键词
            this.titleMsg  = this.infoMsg.title+'_集设网';//描述
            this.descriptionMsg = "集设网-概念方案下载，优质的室内设计素材下载网站";
            axios.get("/nearby/"+this.modeType+"/"+this.infoMsg.cat_id1.id+'/'+this.$route.query.modeId+"/getitems").then(response => {
                this.rimMsg = response.data.data.items[this.modeType];
                this.rightTop.right = $(window).width()-$(".modeMsg").width()-$(".modeMsg").offset().left;
            });
        })
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    metaInfo () {
      return {
        title: this.titleMsg,
        meta: [
            {                 // set meta
                name: 'keyWords',
                content: this.keyWordsMsg
            },
            {                 // set meta
                name: 'description',
                content: this.descriptionMsg
            }
        ]
      }
    },
};
</script>

<style>
  @import './info.css';
</style>